<%@ page pageEncoding="UTF-8" %>
<html>
<head>
    <title>沐言科技：www.yootk.com</title>
    <script type="text/javascript" src="js/json3.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
    <script type="text/javascript" src="jquery/additional-methods.min.js"></script>
    <script type="text/javascript" src="jquery/Message_zh_CN.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        window.onload = function() {    // 动态事件绑定
            loadProvinceData(); // 调用省份信息加载函数
            document.getElementById("province").addEventListener("change", function() {
                xmlHttpRequest = new XMLHttpRequest(); // 获取Ajax操作对象
                if (xmlHttpRequest.withCredentials) {   // 当前浏览器是否支持有Ajax操作
                    alert("对不起，您的浏览器不支持Aajx处理操作！");
                } else {    // 现在支持有Ajax的处理操作
                    xmlHttpRequest.open("post", "city.action"); // 建立通讯连接
                    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置头信息
                    xmlHttpRequest.onload = function (env) {    // 接收响应数据
                        jsonText = xmlHttpRequest.responseText; // 响应数据
                        cityJsonObject = JSON.parse(jsonText); // 进行文本数据的解析
                        document.getElementById("city").length = 1;
                        for (x = 0; x < cityJsonObject.length; x ++) {
                            optionElement = document.createElement("option"); // 创建元素
                            optionElement.length = 1; // 清空数据项
                            optionElement.setAttribute("value",cityJsonObject[x].cid);
                            optionElement.appendChild(document.createTextNode(cityJsonObject[x].title));
                            document.getElementById("city").appendChild(optionElement);
                        }
                    }
                    xmlHttpRequest.send("pid=" + this.value); // 发送请求参数
                }
            }, false);
        }
        function loadProvinceData() {   // 加载省份数据信息
            jsonData = JSON.stringify(${provinces});
            provinceJsonObject = JSON.parse(jsonData); // 响应数据
            for (x = 0; x < provinceJsonObject.length; x ++) {
                optionElement = document.createElement("option"); // 创建元素
                optionElement.setAttribute("value",provinceJsonObject[x].pid);
                optionElement.appendChild(document.createTextNode(provinceJsonObject[x].title));
                document.getElementById("province").appendChild(optionElement);
            }
        }
    </script>
</head>
<body>
<div>&nbsp;</div>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <strong><img src="images/logo.png" style="height: 30px;">&nbsp;【AJAX + JSON】级联菜单开发实例</strong>&nbsp;&nbsp;&nbsp;
        </div>
        <div class="panel-body">
            <div class="form-group">
                <div class="col-md-1">省份：</div>
                <div class="col-md-5">
                    <select name="province" id="province" class="form-control">
                        <option value="">============= 请选择快递配送省份 =============</option>
                    </select>
                </div>
                <div class="col-md-1">城市：</div>
                <div class="col-md-5">
                    <select name="city" id="city" class="form-control">
                        <option value="">============= 请选择快递配送城市 =============</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <div style="text-align:right;">
                <strong>沐言科技（www.yootk.com） —— 新时代软件教育领导品牌</strong>
            </div>
        </div>
    </div>
</div>
</body>
</html>
